<!DOCTYPE html>
<html lang="en" onclick="fn(event)">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d2 {
            width: 200px;
            height: 20px;
            border:1px solid aqua;
            display: inline-block;
        }
        #d3 {
            height: 20px;
            background: lawngreen;
            display: inline-block;
        }
    </style>
    <script>
        //网页加载完成之后自动出现星星
//        window.onload = init;
        var dingshiqi; //定时器名称
        var count = 0;  //星星数量
        var n = 0;   //游戏时间
        var m = 0;   //点击了多少个星星
        function startGemet() {
            window.clearInterval(dingshiqi);
            dingshiqi = window.setInterval("start()",1000);
        }
        function start() {
            //创建img标签
            var obj = document.createElement('img');
            obj.src = "xingxing.gif";
            //添加img标签到body下面
            document.body.appendChild(obj);
            /*//!*!/获取x，y坐标
            var x = e.clientX;
            var y = e.clientY;*!/*/
            //随机获取星星的宽和高
            var x = Math.floor(Math.random()*1160+100);
            var y = Math.floor(Math.random()*400+150);
            obj.style.position = "absolute";
            obj.style.top = y+"px";
            obj.style.left = x+"px";
            //设置星星宽度随机大小 20-100
            var w = Math.floor(Math.random()*(100-20)+20);
            obj.width = w;
            //删除绑定事件
            obj.onclick = removeStart;
            count++;
            if (count > 20) {
                alert("游戏失败！！");
                //重新加载页面
                location.reload();
            }
            // 游戏进行的时间
            n++;
            var shij = document.getElementById("d1");
            shij.innerHTML = "游戏已进行了"+n+"秒";
            //游戏进度条
            var sp = document.getElementById("d3");
            sp.style.width = count*10+"px";
            if (m >= 20) {
                alert("游戏通关,你一共点击了"+m+"个星星");
                //重新加载页面
                location.reload();
            }
        }
        function removeStart() {
            //找到当前对象的父节点 通过父节点删除当前对象
            this.parentNode.removeChild(this);
            count--;
            //游戏进度条
            var sp = document.getElementById("d3");
            sp.style.width = count*10+"px";
            // 累计点击的星星个数
            m++;
        }
        function tingz() {
            alert("暂停游戏");
            //删除定时器
            window.clearInterval(dingshiqi);
        }
    </script>
</head>
<body>
<input type="button" value="开始游戏" onclick="startGemet()">
<input type="button" value="暂停游戏" onclick="tingz()">
<span id="d1">游戏已进行了0秒</span>
<span id="d2">
    <span id="d3"></span>
</span>
</body>
</html>